<template>
  <div class="simpleness-card">
    <div class="icon-wrap"><slot name="icon"></slot></div>
    <div class="card-body">
      <h6 :style="`font-size: ${size}px`">{{title}}</h6>
      <p v-if="content">{{content}}</p>
      <slot v-else name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},
  props: {
    content:{
        type: String,
        default:''
    },
    title: {
        type: String,
        default:''
    },
    size: {
      type: String,
        default:'16'
    }
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed(){},
}

</script>
<style lang='scss' scoped>
.simpleness-card{
  display: flex;
  .icon-wrap{
   
    
    display: flex;
     i{
      margin-right:10px;
      margin-top: 10px;
    }
  }
  .card-body{
    h6{
      font-size: 16px;
      line-height: 150%;
      text-indent: 15px;
      margin-bottom: 20px;
    }
    p{
	    font-size: 12px;
	    line-height: 250%;
      text-indent: 15px;
    }
  }
    
}
@media screen and (max-width:768px) {
  .simpleness-card {
    .card-body {
      h6{
        margin-bottom: .2rem;
      }
    }

    .icon-wrap{
      display: flex;
      i{
        margin-right:10px;
        margin-top: 10px;
      }
    }
  }
}
</style>